<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- STYLESHEETS -->
    <!--[if lt IE 9]>
    <script src="../../js/flot/excanvas.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">

    <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- file-input -->
    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css"/>
    <!-- SELECT2 -->
    <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css"/>
    <!-- UNIFORM -->
    <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css"/>
    <!-- datatable -->
    <link rel="stylesheet" href="../../js/datatables/datatable.css">
    <!-- WIZARD -->
    <link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css"/>
    <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
    <!-- FONTS
<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
--> <!-- file-input -->
    <link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css"/>
    <!-- JQUERY -->
    <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
    <script src="../../js/common.js"></script>

    <style>

        .left {
            float: left;
            width: 45%;
            height: 400px;
        }

        .right {
            float: left;
            width: 55%;
            height: 400px;
            position: relative;
        }

        .floatDiv {
            width: 160px;
            height: 150px;
            border: 1px dotted blue;
            padding: 10px;
            position: relative;
            left: 65%;
            top: -45%;
        }
    </style>
</head>

<body>
<header class="navbar clearfix" id="header">
</header>
<input id="p_code" type="hidden" name="p_code" value=""/>
<!-- PAGE -->
<section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
        <div class="sidebar-menu nav-collapse">

            <!-- SIDEBAR MENU -->
            <ul>

            </ul>
            <!-- /SIDEBAR MENU -->
        </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">

        <div class="container">

            <div class="row">
                <div id="content" class="col-lg-12">
                    <!-- PAGE HEADER-->
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="page-header">
                                <!-- STYLER -->

                                <!-- /STYLER -->
                                <!-- BREADCRUMBS -->
                                <ul class="breadcrumb">
                                    <li>
                                        <i class="fa fa-home"></i>
                                        <a href="index.html">首页</a>
                                    </li>
                                    <li>
                                        <a href="#">商品管理</a>
                                    </li>
                                    <li>维护商品</li>
                                </ul>
                                <!-- /BREADCRUMBS -->

                            </div>
                        </div>
                    </div>
                    <form id="main" method="post" action="../../admin/adminsku/saveBatchSku.do">
                        <input type="hidden" name="sku">
                        <div class="detail_list ">

                            <div style="float:left; margin-left:5px; margin-right: 10px" class="addnewimg" id="f_span">

                                <!--
                                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0"
                                     aria-valuemax="100" style="margin-bottom: 0px; margin-top: 10px; display: none;">
                                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                                </div>
                                -->
                                <a href="javaScript:;" class="btn btn-success downloadBtn">
                                    模板下载
                                </a>
                                <span class="btn btn-success btn-file" id="fir">
								<span id="two">导入商品明细</span>
									<input name="uploadFile" upload-file="imageUrlProduct"
                                           type="file">
							</span>

                            </div>
                            <div style="float:right; margin-right: 20px;margin-bottom:5px;" class="addnewimg" id="f_span">
                                <a href="javaScript:;" class="btn btn-success saveBtn">
                                    <i class="fa  fa-plus-square-o"></i> 保存
                                </a>
                            </div>


                            <div class="box border primary" style="margin-top: 15px">

                                <div class="box-body" style="min-height: 200px" id="box_table">
                                    <table id="importData" cellpadding="0" cellspacing="0" border="0"
                                           class="datatable table table-striped table-bordered table-hover">

                                    </table>
                                </div>
                            </div>


                        </div>
                    </form>
                </div>
                <!-- /CONTENT-->
            </div>
        </div>
    </div>
</section>
<!-- JQUERY -->
<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
<script src="../../js/common.js"></script>
<!-- JQUERY UI-->
<script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
<!-- SLIMSCROLL -->
<script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="../../js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
<!-- BLOCK UI -->
<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
<!--bootbox-->
<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
<!-- AUTOSIZE -->
<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
<!-- spinner -->
<script src="../../js/spinner/spin.js"></script>
<!-- bootstrap-fileupload -->
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload.min.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-process.min.js"></script>
<script type="text/javascript" src="../../js/jquery-upload/js/jquery.fileupload-validate.min.js"></script>

<!-- INPUT MASK -->
<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

<!-- SELECT2 -->
<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
<!-- UNIFORM -->
<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
<!-- WIZARD -->
<script src="../../js/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<!-- WIZARD -->
<script src="../../js/jquery-validate/jquery.validate.min.js"></script>
<script src="../../js/jquery-validate/additional-methods.min.js"></script>
<script src="../../js/bootstrap-wizard/form-wizard.js"></script>
<script language="javascript" type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
<!-- NESTABLE LISTS -->
<script type="text/javascript" src="../../js/nestable/jquery.nestable.min.js"></script>
<!-- COOKIE -->
<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../js/script.js"></script>

<script src="../../js/Sortable.min.js"></script>

<!-- DATA TABLES -->
<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
<script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>
<script>
    var datetables = null;
    var count = 0;

    var init = function () {
        App.init();
        //文件上传前触发事件
        var contractId = "";

        //导入模板
        $("[upload-file=imageUrlProduct]").fileupload({
            url: App.getContextPath() + "admin/adminsku/readTemplate.do",
            dataType: 'json',
            acceptFileTypes: /(\.|\/)(xlsx)$/i,
            iframe: true,
            start: function (e) {
                $.blockUI();
                $('.progress').fadeIn(300);
                return true;
            },
            autoUpload: true,
            done: function (e, data) {
                $.unblockUI();
                if (data.result.type == 'error') {
                    $.alert("导入的数据有问题");
                } else {

                    $("#box_table").html("");
                    var str = " <table id='importData' cellpadding='0' cellspacing='0' border='0' class='datatable table table-striped table-bordered table-hover'></table>";
                    $("#box_table").append(str);

                    initDateTable(data.result.extra);
                }

            },
            progressall: function (e, data) {

                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress .progress-bar').css('width', progress + '%');
            }
        }).on('fileuploaddone', function (e, data) {
            $(".progress").fadeOut(300);

        });

        //下载
        $(".downloadBtn").click(function () {
            location.href = App.getContextPath() + "admin/file/downloadTemplate.do?template=Group";
        });

        //保存
        $(".saveBtn").click(function () {


            $.blockUI();
            var is_check = true;
            var list = [];
            $("#importData tbody tr").each(function () {
                var sku = {};
                var ygGroup = {};
                ygGroup.groupName = $(this).find("td:eq(0)").html();
                ygGroup.costPrice = $(this).find(".costPrice").html();
                ygGroup.extMaterial = $(this).find(".extMaterial").html();
                ygGroup.categoryId = $(this).find(".categoryId").html();
                ygGroup.basicAttribute = $(this).find(".basicAttribute").html();
                sku.group = ygGroup;
                sku.productName = $(this).find("td:eq(1)").html();
                sku.color = $(this).find("td:eq(2)").html();
                sku.sizeName = $(this).find("td:eq(3)").html();
                sku.salePrice = $(this).find(".salePrice").html();
                sku.isCoats = $(this).find(".isCoats").html() == "是" ? true : false;
                list.push(sku);

                var remark = $(this).find(".remark").html();
                if (remark != "") {
                    is_check = false;
                    return;
                }
            });


            if (!is_check) {
                $.alert("导入数据有问题");
                $.unblockUI();
                return;
            }

            if (list.length == 0) {
                $.alert("请先上传数据");
                $.unblockUI();
                return false;
            }

            $("#main").find("[name=sku]").val(JSON.stringify(list));
            $("#main").submit();
            /*  //提交数据
             $.ajax({
                  type: "post",
                  url: App.getContextPath() + "admin/adminsku/saveBatchSku.do",
                  data:$.param({sku:JSON.stringify(list)}),
                  async: true,
                  success: function(result) {
                      $.unblockUI();
                      if(result.type=="error"){
                          $.alert(result.extra);}
                      else{
                          //$.alert("保存成功");

                          //location.href="sku_list.html";
                          }
                      }
              }); */


        });

    }


    var initDateTable = function (data) {
        var dtSetting = {
            "serverSide": false,
            "bFilter": false,// 去掉搜索框
            "sScrollX": "100%",
            "sScrollXInner": "100%",
            "bSort": false,
            "paging": false,
            "data": data,
            "info": false,

            "aoColumns": [{
                "mDataProp": "group.groupName",
                "sTitle": "款式名称",
                "width": "6%"
            }, {
                "mDataProp": "productName",
                "sTitle": "商品名称",
                "width": "10%"
            }, {
                "mDataProp": "color",
                "sTitle": "颜色",
                "width": "6%"
            }
                , {
                    "mDataProp": "sizeName",
                    "sTitle": "尺码",
                    "width": "6%"
                }, {
                    "mDataProp": "isCoats",
                    "sTitle": "GOTS认证",
                    "width": "6%",
                    "class": "isCoats",
                    "render": function (data, type, row) {
                        if (row.isCoats) return "是";
                        return "否";
                    }
                }, {
                    "mDataProp": "salePrice",
                    "sTitle": "销售价",
                    "width": "6%",
                    "class": "salePrice",
                    "render": function (data, type, row) {
                        return row.salePrice;
                    }
                }, {
                    "mDataProp": "isCoats",
                    "sTitle": "成衣成本",
                    "width": "6%",
                    "class": "costPrice",
                    "render": function (data, type, row) {
                        return row.group.costPrice;
                    }
                }, {
                    "mDataProp": "isCoats",
                    "sTitle": "包装袋",
                    "width": "6%",
                    "render": function (data, type, row) {
                        return row.group.createBy;
                    }
                }, {
                    "mDataProp": "isCoats",
                    "sTitle": "封口贴",
                    "width": "6%",
                    "render": function (data, type, row) {
                        return row.group.updateBy;
                    }
                }, {
                    "mDataProp": "remark",
                    "sTitle": "提示",
                    "width": "10%",
                    "class": "remark",
                    "render": function (data, type, row) {
                        if (row.createBy != null && row.createBy != "")
                            return "<span style='color:red'>" + row.createBy + "</span>";
                        else
                            return "";
                    }
                }, {
                    "mDataProp": "group.extMaterial",
                    "class": "extMaterial hide",
                }
                , {
                    "mDataProp": "group.categoryId",
                    "class": "categoryId hide",
                }, {
                    "mDataProp": "group.basicAttribute",
                    "class": "basicAttribute hide",
                }]
        };
        datetables = $("#importData").dataTable(dtSetting);

    }


    $(function () {
        $("#header").load("../head.html");
        init();
    });
</script>

<!-- /JAVASCRIPTS -->
</body>

</html>